<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('systemManagement.close')"
    wrapClassName="ant-modal-cust-warp"
    style="top:15%;height: 70%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        {{$t('systemManagement.close')}}
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="customerModal">
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('commodityManagement.name')">
            <a-input :placeholder="$t('reportQuery.pleaseEnterAName')" v-decorator.trim="[ 'supplier', validatorRules.supplier]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.customerCategory')"
              data-step="8" :data-title="$t('reportQuery.customerCategory')" :data-intro="$t('reportQuery.customerCategoryIntro')">
            <a-tree-select style="width:100%;" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
              :treeData="categoryTree" v-decorator="[ 'categoryId', validatorRules.categoryId ]" :placeholder="$t('reportQuery.placeholderCategory')">
            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('basicInformation.creditCustomer')"
              data-step="8" :data-title="$t('basicInformation.creditCustomer')" :data-intro="$t('reportQuery.customerCategoryIntro')">
              
            <a-select :placeholder="$t('basicInformation.creditCustomer')"  v-decorator="[ 'chequePayment', validatorRules.chequePayment, { initialValue:'0' } ]">
                <a-select-option value="1">{{$t('basicInformation.yes')}}</a-select-option>
                <a-select-option value="0">{{$t('basicInformation.no')}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.contactPerson')">
            <a-input :placeholder="$t('systemManagement.pleaseContact')" v-decorator.trim="[ 'contacts' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.mobileNumber')">
            <a-input :placeholder="$t('inPrint.pleasePhone')" v-decorator.trim="[ 'telephone' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.contactNumber')">
            <a-input :placeholder="$t('inPrint.pleaseContact')" v-decorator.trim="[ 'phoneNum' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.email')">
            <a-input :placeholder="$t('inPrint.pleaseEmail')" v-decorator.trim="[ 'email' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('otherJS.applicablePrice')">
            <a-select :placeholder="$t('setailManagement.seletOperator')" showSearch optionFilterProp="children" v-decorator.trim="[ 'pricePriority']">
                <a-select-option value="1">{{$t('popup.primaryWholesalePrice')}}</a-select-option>
                <a-select-option value="2">{{$t('popup.secondaryWholesalePrice')}}</a-select-option>
                <a-select-option value="3">{{$t('popup.tertiaryWholesalePrice')}}</a-select-option>
                <a-select-option value="4">{{$t('popup.level4WholesalePrice')}}</a-select-option>
                <a-select-option value="5">{{$t('popup.level5WholesalePrice')}}</a-select-option>
                <a-select-option value="6">{{$t('commodityManagement.retailPrice')}}</a-select-option>
                <a-select-option value="7">{{$t('popup.lowestSellingPrice')}}</a-select-option>
                <a-select-option value="8">{{$t('otherJS.latestSellingPriceCustomer')}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.openingReceivables')">
            <a-input :placeholder="$t('inPrint.pleaseAR')" v-decorator.trim="[ 'beginNeedGet' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('reportQuery.closingReceivables')">
            <a-input v-decorator.trim="[ 'allNeedGet' ]" :readOnly="true" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('inPrint.taxpayerNumber')">
            <a-input :placeholder="$t('inPrint.pleaseIdentification')" v-decorator.trim="[ 'taxNum' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('basicInformation.taxRate')">
            <a-input-number style="width:100%" :placeholder="$t('inPrint.pleaseTax')" v-decorator.trim="[ 'taxRate', validatorRules.taxRate ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('inPrint.fax')">
            <a-input :placeholder="$t('inPrint.pleaseFax')" v-decorator.trim="[ 'fax' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('inPrint.bankDeposit')">
            <a-input :placeholder="$t('inPrint.pleaseDeposit')" v-decorator.trim="[ 'bankName' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('login.userAccount')">
            <a-input :placeholder="$t('inPrint.pleaseAccount')" v-decorator.trim="[ 'accountNumber' ]" />
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('basicInformation.address')">
            <a-input :placeholder="$t('inPrint.pleaseAddress')" v-decorator.trim="[ 'address' ]" />
          </a-form-item>
        </a-col>
        
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('otherJS.payByCheck')">
            <a-select :placeholder="$t('otherJS.pleaseSelectIsCheck')"  v-decorator="[ 'isCheck', validatorRules.isCheck, { initialValue:'0' } ]">
                <a-select-option value="0">{{$t('otherJS.isCheckFalse')}}</a-select-option>
                <a-select-option value="1">{{$t('otherJS.isCheckTrue')}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24/2">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.remarks')">
            <a-textarea :rows="2" :placeholder="$t('reportQuery.pleaseEnterComments')" v-decorator.trim="[ 'description' ]" />
          </a-form-item>
        </a-col>
      </a-form>
    </a-spin> 
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import {queryUserCategoryTreeList, addSupplier,editSupplier,checkSupplier } from '@/api/api'
  import {autoJumpNextInput} from "@/utils/util"
  export default {
    name: "CustomerModal",
    props: ['categoryId'],
    data () {
      return {
        title:this.$t('setailManagement.operation'),
        visible: false,
        model: {},
        isReadOnly: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        categoryTree: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          taxRate:{
            rules: [
              { required: true, message: this.$t('reportQuery.pleaseEnterTaxRate')+'!' },
            ]
          },
          pricePriority:{
            rules: [
              { required: true, message: this.$t('otherJS.pleaseSelectApplicablePrice')+'!' },
            ]
          },
          isCheck:{
            rules: [
              { required: true, message: this.$t('otherJS.pleaseSelectIsCheck')+'!' },
            ]
          },
          categoryId:{
            rules: [
              { required: true, message: this.$t('otherJS.pleaseSelectCustomerCategory')+'!' },
            ]
          },
          supplier:{
            rules: [
              { required: true, message: this.$t('reportQuery.pleaseEnterAName')+'!' },
              { min: 2, max: 60, message: this.$t('inPrint.length2and60'), trigger: 'blur' },
              { validator: this.validateSupplierName}
            ]
          },
          chequePayment:{
            rules: [
              { required: true, message: this.$t('otherJS.pleaseSelectCustomerCategory')+'!' },
            ]
          },
        },
      }
    },
    created () {
      this.loadTreeData();
    },
    methods: {
      add () {
        this.edit({isCheck:'0'});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'supplier', 'categoryId', 'pricePriority', 'contacts', 'telephone', 'email', 'telephone',
            'phoneNum', 'fax', 'beginNeedGet', 'beginNeedPay', 'allNeedGet', 'allNeedPay', 'taxNum', 'taxRate','isCheck',
            'bankName', 'accountNumber', 'address', 'description'))
          autoJumpNextInput('customerModal')
          // if(this.categoryId !== '') {
          //   this.form.setFieldsValue({
          //     categoryId: this.categoryId
          //   })
          // }
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      loadTreeData(){
        let that = this;
        let params = {};
        params.id='';
        queryUserCategoryTreeList(params).then((res)=>{
          if(res){
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            if(this.model.beginNeedGet && this.model.beginNeedPay) {
              that.$message.warn(this.$t('inPrint.openingCannotSame'));
              that.confirmLoading = false;
              return;
            }
            formData.type = "客户";
            let obj;
            if(!this.model.id){
              obj=addSupplier(formData);
            }else{
              obj=editSupplier(formData);
            }
            obj.then((res)=>{
              if(res.code === 200){
                that.$emit('ok');
              }else{
                that.$message.warning(res.data.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateSupplierName(rule, value, callback){
        let params = {
          name: value,
          type: '客户',
          id: this.model.id?this.model.id:0
        };
        checkSupplier(params).then((res)=>{
          if(res && res.code===200) {
            if(!res.data.status){
              callback();
            } else {
              callback(this.$t('commodityManagement.nameExists'));
            }
          } else {
            callback(res.data);
          }
        });
      }
    }
  }
</script>
<style scoped>

</style>